<template>
      <div>
        <!--header-->
        <home-header :city="city"></home-header>
        <!--banner-->
        <home-swiper :swiperList="swiperList"></home-swiper>
        <!--hot link-->
        <home-icons :iconList="iconList"></home-icons>
        <!--recommend-->
        <home-recommend :recommendList="recommendList"></home-recommend>
        <!--weekend-->
        <home-weekend :weekendList="weekendList"></home-weekend>
      </div>
</template>

<script>
  import HomeHeader from "./components/Header"
  import HomeSwiper from "./components/Swiper"
  import HomeIcons from "./components/Icons"
  import HomeRecommend from "./components/Recommend"
  import HomeWeekend from "./components/Weekend"
    export default {
        name: "home",
      data(){
          return {
            city:"",
            iconList:[],
            recommendList:[],
            swiperList:[],
            weekendList:[]
          }
      },
      components:{
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeRecommend,
          HomeWeekend
      },
      methods:{
        getHomeInfo(){
          this.axios.get("/api/index.json")
            .then(res =>{
              console.log(res);
               res = res.data;
              if(res.ret){
                this.city=res.data.city;
                this.iconList = res.data.iconList;
                this.recommendList = res.data.recommendList;
                this.swiperList = res.data.swiperList;
                this.weekendList = res.data.weekendList;
              }
            })
        }
      },
     mounted(){
        this.getHomeInfo()
      }
    }
</script>

<style scoped>

</style>
